<template>
  <component :is="selectedCom" :date="date" :time="time" @unlock="unlock" />
</template>
<script>
import Cookies from 'js-cookie'

import lockTheme1 from './lockTheme1.vue'
import lockTheme2 from './lockTheme2.vue'
import lockTheme3 from './lockTheme3.vue'
export default {
  components: { lockTheme1, lockTheme2, lockTheme3 },
  data() {
    return {
      selectedCom: lockTheme1,
      date: '-',
      time: '-'
    }
  },
  created() {
    this.randomLock()
    this.getTime()
    this.getDate()
    setInterval(() => {
      this.getTime()
    }, 1000)
  },
  methods: {
    randomLock() {
      var temp = Math.ceil(Math.random() * 3)
      if (temp === 0) {
        temp = 1
      }
      this.selectedCom = 'lockTheme' + temp
    },
    unlock(password) {
      this.$store.dispatch('unlock', password).then((res) => {
        Cookies.set('lockScreen', false)
        this.msgSuccess('解锁成功,正在跳转...')
        setTimeout(() => {
          this.$router.push({ path: this.redirect || '/' })
        }, 2000)
      }).then((_) => {})
    },
    getTime() {
      var date = new Date()
      var hour = date.getHours()
      var minutes = date.getMinutes()
      var seconds = date.getSeconds()
      if (hour < 10) {
        hour = '0' + hour
      }
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      if (seconds < 10) {
        seconds = '0' + seconds
      }
      this.time = hour + ':' + minutes + ':' + seconds
    },
    getDate() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      if (day < 10) {
        day = '0' + day
      }
      if (month < 10) {
        month = '0' + month
      }
      this.date = year + '/' + month + '/' + day + ' ' + this.T.getWeek()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
